<template>
	<Div class="margin-top-20">
			<Row class="form">
			<Form :model="searchForm" inline :label-width="60">
				<FormItem label="订单号">
					<Input placeholder="订单号" class="w200" v-model="searchForm.order_number"></Input>
				</FormItem>
				<FormItem label="退款状态">
					<Select v-model="searchForm.refund_status" class="w200" clearable placeholder="全部">
						<Option v-for="item in refunds_status" :key="item.flag" :value="item.flag">{{ item.name }}</Option>
					</Select>
				</FormItem>
				<FormItem label="退款类型">
					<Select v-model="searchForm.refund_type" class="w200" clearable placeholder="全部">
						<Option v-for="item in refunds_type" :key="item.flag" :value="item.flag">{{ item.name }}</Option>
					</Select>
				</FormItem>
				<FormItem label="选择时间">
					<DatePicker type="datetime" v-model="searchForm.start" format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间"></DatePicker>
					<span>-</span>
					<DatePicker type="datetime" v-model="searchForm.end" format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间"></DatePicker>
				</FormItem>
					<Button icon="ios-search" type="success" @click="handleSearch">查询</Button>
			</Form>
			</Row>
	<Row>
		<Table :columns="columns" :data="orderList"></Table>
		<Page :total="page.total" :page-size="page.pageSize" :current.sync="page.current" @on-change="handlePage" show-total show-elevator  class="fr margin-top-20"></Page>
	</Row>
	<Modal v-model="modal" title="退款详情">
		<div>
			<p>订单号：{{ dialog.order_no }}</p>
			<p>支付流水：{{ dialog.trade_no }} </p>
			<p>支付方式：{{ dialog.pay_software }}</p>
			<p>交易金额：{{ dialog.deal_mount }}</p>
			<p>交易时间：{{ dialog.pay_at }}</p>
			<p>退款金额：{{ dialog.refund_amount }}</p>
			<p>退款类型：{{ dialog.refund_type }}</p>
			<p>退款状态：{{ dialog.refund_status }}</p>
			<p>退款时间：{{ dialog.refund_at }}</p>
			<p>退款备注：{{ dialog.remark }}</p>
		</div>
		<Div slot="footer"></Div>
	</Modal>
	</Div>
</template>
<script>
	import CountTo from '../count-to/CountTo.vue';
	import { refundInit, refundSearch, handleRrfundList, refundPage } from '@/api/order'

	export default {
		components: {
			CountTo
		},
				name: 'order_code',
		data(){
			return{
				searchForm: {
					order_number: '',
					start: '',
					end: '',
					refund_status: '',
					refund_type: ''
				},
				modal: false,
				dialog: {
					order_no: '',
					trade_no: '',
					pay_at: '',
					deal_mount: '',
					pay_software: '',
					refund_amount: '',
					refund_type: '',
					refund_status: '',
					refund_at: '',
					remark: ''
				},
				endVal: 0,
				codeName: '无',
				discount: '无',
				amount: 0,
				count: 0,				
				mainStyle:{
					fontSize: 'inherit',
					fontWeight: 'inherit'
				},
				columns:[
					{
						title: "订单号",
						key: "order_no",
						align: 'center'
					},
					{
						title: "退款单号",
						key: "refund_no",
						align: 'center'
					},
					{
						title: "门店名称",
						key: 'store_name',
						align: 'center'
					},
					{
						title: '退款金额',
						key: 'refund_amount',
						align: 'center'
					},
					{
						title: '支付方式',
						key: "pay_software",
						align: 'center'
					},
					{
						title: '退款类型',
						key: 'refund_type',
						align: 'center'
					},
					{
						title: '退款时间',
						key: 'refund_at',
						align: 'center'
					},
					{
						title: '退款状态',
						key: 'refund_status',
						align: 'center'
					},
					{
						title: '退款详情',
						align: 'center',
						render:(h,params) => {
							return h('Button',{
								props:{
									type: 'text'
								},
								style:{
									color: '#0078ff',
									padding: 0
								},
								on: {
									click: ()=>{
										this.show(params.row.id)
									}
								}
							},"查看")
						}
					}
				],
				orderList:[],
				page: {
					total: 0,
					pageSize: 0,
					current: 1
				},
				sort: [],
				refunds_status: [],
				refunds_type: []
			}
		},
		methods:{
			init() {
				refundInit().then(Response => {
					this.refunds_status = Response.data.data.refund_status
					this.refunds_type = Response.data.data.refund_type
					this.orderList = Response.data.data.refund_orders
					this.sort = Response.data.data.channels
					this.page.total = Response.data.data.total
					this.page.pageSize = Response.data.data.size
					this.page.current = Response.data.data.page
				})
			},
			show(index){
				handleRrfundList(index).then(response => {
					this.dialog.order_no = response.data.data.order_no
					this.dialog.pay_software = response.data.data.pay_software
					this.dialog.refund_amount = response.data.data.refund_amount
					this.dialog.refund_status = response.data.data.refund_status
					this.dialog.refund_type = response.data.data.refund_type
					this.dialog.trade_no = response.data.data.trade_no
					this.dialog.pay_at = response.data.data.pay_at
					this.dialog.refund_at = response.data.data.refund_at
					this.dialog.deal_mount = response.data.data.deal_mount
					this.dialog.remark = response.data.data.remark
					this.modal = true;
				})
			},
			handlePage(v) {
				refundPage(v, this.searchForm).then(Response => {
					this.orderList = Response.data.data.refund_orders
					this.page.total = Response.data.data.total
					this.page.current = response.data.data.page
				})
			},
			handleSearch() {
				refundSearch(this.searchForm).then(Response => {
					this.orderList = Response.data.data.refund_orders
					this.page.total = Response.data.data.total
					this.page.current = Response.data.data.page
				})
			}
		},
		created() {
			this.init()
		}
	}
</script>